<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title> new document </title>
    <meta charset="utf-8"/>
    <meta name="generator" content="editplus">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
<script type="text/javascript">
    var count = 1;    //递增的开始值
    $(function () {
        var show_count = 20;   //要显示的条数
        $("#btn_addtr").click(function () {
            var length = $("#dynamicTable tbody tr").length;
            if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
            {
                count = count + 1;
                var tableHtml = "";
                tableHtml += '<tr>'
                    + '<td><input type="text" name="NO[]" size="2" value="' + count + '" /> </td>'
                    + '<td><input type="text" name="serial_number[]"/></td>'
                    + '<td><input type="text" name="product_name[]"/></td>'
                    + '<td><input type="text" name="price[]"/></td>'
                    + '<td><input type="text" name="details[]"/></td>'
                    + '<td><input type="text" name="delivery_date[]"/></td>'
                    + '<td><input type="text" name="supply_cycle[]"/></td>'
                    + '<td><input type="text" name="description[]"/></td>'
                    + '<td><input type="button" onClick="deltr(this)" value="删行"></td>'
                    + '</tr>';
                $("#dynamicTable tbody").append(tableHtml);   //在表格后面添加一行
            } else {
                alert('最大行数不能超过20行');
            }
        });
    });

    function deltr(opp) {
        var length = $("#dynamicTable tbody tr").length;
        if (length <= 1) {
            alert("至少保留一行");
        } else {
            $(opp).parent().parent().remove();//移除当前行
        }
    }

    $("#buttonsub").click(function () {
        var data = $("#form").serialize();
        $.ajax({
            url: '{:url("Quote/quote_edit")}', //实际使用请改成服务端真实接口
            data: data,
            type: "post",//方法类型
            success: function (res) {
                layer.alert(res.msg, {icon: 6}, function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(res.msg);
                    parent.location.reload(); //刷新父亲对象
                });
            }
        })
    })


</script>

<form class="layui-form" id="form">
    <input type="button" class="layui-btn" id="btn_addtr" value="增报价单">
    <table id="dynamicTable">
        <tbody>
        <tr>
            <td align="center">
                <input type="text" name="NO[]" size="2" value="1"/>
            </td>
            <td align="center">
                <input type="text" name="serial_number[]"/>
            </td>
            <td align="center">
                <input type="text" name="product_name[]"/>
            </td>
            <td align="center">
                <input type="text" name="price[]"/>
            </td>
            <td align="center">
                <input type="text" name="details[]"/>
            </td>
            <td align="center">
                <input type="text" name="delivery_date[]"/>
            </td>
            <td align="center">
                <input type="text" name="supply_cycle[]"/>
            </td>
            <td align="center">
                <input type="text" name="description[]"/>
            </td>
            <td>
                <input type="button" id="Button2" onClick="deltr(this)" value="删行">
            </td>
        </tr>
        </tbody>
    </table>
    <input class="layui-btn" value="参与报价" type="button" id="buttonsub">
</form>

</body>
</html>